<template>
        <el-container class="home-container">
            <el-header>
                <div class="left">
                    <img src="../assets/logo.png" alt="" height="50px">
                    <span>XXXXXX管理系统</span>
                </div>
                <div class="right">
                    <i class="el-icon-user" @click="userInformation" style="margin-right: 15px"></i>
                    <el-dropdown>
                        <i class="el-icon-setting"></i>
                        <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>切换账号</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside width="250px">
                    <el-menu default-active="2" class="el-menu-vertical-demo"
                    background-color="rgb(190, 212, 222)" text-color="#000" active-text-color="#ff3300">
                    <!--一级菜单-->
                    <el-submenu index="1">
                        <template slot="title">
                            <span>课程一</span>
                        </template>
                            <!--二级菜单-->
                            <el-menu-item index="1-1">作业1</el-menu-item>
                            <el-menu-item index="1-2">作业2</el-menu-item>
                            <el-menu-item index="1-3">作业3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <span>课程二</span>
                        </template>
                            <el-menu-item index="1-1">作业1</el-menu-item>
                            <el-menu-item index="1-2">作业2</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3">
                        <span slot="title">课程三</span>
                    </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    主体<!--主体-->
                </el-main>
            </el-container>
        </el-container>
</template>
<script>
    export default {
        name:"Main",
        data:{

        },
        methods:{
            userInformation(){
                console.log("ccc");
            },
        }
    }
</script>
<style lang="less" scoped> 
    .home-container{
        height:100vh;
    }
    .el-header{
        background-color:rgb(96, 157, 191);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;
        .left{
            display: flex;
            align-items: center;
            span{
                margin-left: 5px;
            }
        }
    }
    .el-aside{
        background-color:rgb(163, 198, 218);
    }
    .el-main{
        background-color:rgb(202, 222, 234);
    }
</style>